<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <title>组件化UI框架Flow-UI</title>
    <meta content="Flow-UI文档,Flow-CLI,front-flow" name="Keywords">
    <meta content="Flow-UI 是一套组件化UI框架，支持定制主题，主要服务于前台及中后台产品。" name="Description">
    <meta property="og:type" content="document"/>
<meta property="og:release_date" content="2016-06-20"/>
<meta property="og:title" content="Flow-UI Documentation"/>
<meta property="og:description" content="Flow-UI 是一套组件化UI框架，支持定制主题，主要服务于前台及中后台产品。"/>
<meta property="og:document:type" content="html"/>
<meta property="og:image" content="https://github.com/tower1229/tower1229.github.io/raw/master/asset/ico108.png"/>
<meta property="og:document:page" content="1"/>
<meta property="og:document:cost" content="免费"/>
<link href="/Flow-UI/docs/favicon.ico" rel="icon">
<link href="/Flow-UI/docs/css/style.css" rel="stylesheet">
<script type="text/javascript">
	if(window.location.href.indexOf('https')===0){
		document.write('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />');
	}
</script>
<!--[if lt IE 9]><script src="/Flow-UI/docs/lib/H5shiv.js"></script><![endif]-->
<script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?f10103677155b485824f29def715eb5d";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
</head>

<body>
    <div class="wrap m-tb">
        <div class="tc"><a href="http://refined-x.com/Flow-UI/" title="Flow-UI前端组件化开发框架"><img src="/Flow-UI/docs/img/ico.png" style="width: 8em"></a></div>
        <h1 class="tc m"><a href="http://refined-x.com/Flow-UI/" title="Flow-UI前端组件化开发框架">Flow-UI</a></h1>
    </div>
    <div class="wrap">
        <h2 class="m">Buttons</h2>
        <div class="row">
            <div class="span-2 m-b">
                <a href="###" class="btn btn-block btn-default">普通按钮</a>
            </div>
            <div class="span-2 m-b">
                <a href="###" class="btn btn-block btn-primary">主色按钮</a>
            </div>
            <div class="span-2 m-b">
                <a href="###" class="btn btn-block btn-auxiliary">辅色按钮</a>
            </div>
            <div class="span-2 m-b">
                <a href="###" class="btn btn-block btn-info">信息按钮</a>
            </div>
            <div class="span-2 m-b">
                <a href="###" class="btn btn-block btn-success">成功按钮</a>
            </div>
            <div class="span-2 m-b">
                <a href="###" class="btn btn-block btn-warning">警告按钮</a>
            </div>
            <div class="span-2 m-b">
                <a href="###" class="btn btn-block btn-danger">危险按钮</a>
            </div>
            <div class="span-2 m-b">
                <a href="###" class="btn btn-block btn-ghost btn-primary">幽灵按钮</a>
            </div>
            <div class="span-2 m-b">
                <a href="###" class="btn btn-block btn-ghost btn-auxiliary">幽灵按钮</a>
            </div>
            <div class="span-2 m-b">
                <a href="###" class="btn btn-block btn-ghost btn-info">幽灵按钮</a>
            </div>
            <div class="span-2 m-b">
                <a href="###" class="btn btn-block btn-ghost btn-success">幽灵按钮</a>
            </div>
            <div class="span-2 m-b">
                <a href="###" class="btn btn-block btn-ghost btn-warning">幽灵按钮</a>
            </div>
        </div>
        <h2 class="m">Input</h2>
        <div class="row">
            <div class="span-2 m-b">
                <input type="text" class="form-control" placeholder="普通">
            </div>
            <div class="span-2 m-b has-primary">
                <input type="text" class="form-control" placeholder="色彩">
            </div>
            <div class="span-3 m-b has-primary">
                <div class="input-group">
                    <div class="input-group-addon">@</div>
                    <input class="form-control" type="email" placeholder="Enter email">
                </div>
            </div>
            <div class="span-3 m-b inputHandle has-primary"> </div>
            <div class="span-2 m-b inputnumberHandle has-primary"> </div>
        </div>
        <div class="row">
            <div class="span-3 m-b">
                <h2 class="m">Dropdown</h2>
                <div class="btn btn-primary drogdownHandle">下拉菜单<i class="ion">&#xe612;</i></div>
            </div>
            <div class="span-3 m-b">
                <h2 class="m">Selete</h2>
                <div class="selectHandle has-primary"></div>
            </div>
            <div class="span-3 m-b tc">
                <h2 class="m">Switch</h2>
                <span class="switchHandle1"></span>
                <span class="switchHandle2"></span>
            </div>
            <div class="span-3 m-b">
                <h2 class="m">Tags</h2>
                <div class="lableHandle"></div>
            </div>
        </div>
        <h2 class="m">Menu</h2>
        <nav id="menu"></nav>
        <div class="row">
            <div class="span-6">
                <h2 class="m">Process / Slider</h2>
                <div class="progress progress-primary m-tb">
                    <div class="progress-inner">
                        <div class="progress-bg" style="width: 65%;"></div>
                    </div>
                </div>
                <div class="progress progress-primary progress-active progress-show-info m-tb">
                    <div class="progress-inner">
                        <div class="progress-bg" style="width: 65%;"></div>
                    </div>
                    <span class="progress-text"><span class="progress-text-inner">65%</span></span>
                </div>
                <div class="sliderHandle m-tb"></div>
            </div>
            <div class="span-6">
                <h2 class="m">Page / Bread</h2>
                <div class="bread m-tb">
                    <a href="###" class="bread-link"> <i class="ion"></i> Home</a>
                    <span class="bread-sep">/</span>
                    <a href="###" class="bread-link"> <i class="ion"></i> Components</a>
                    <span class="bread-sep">/</span>
                    <span class="bread-link"> <i class="ion"></i>Breadcrumb</span>
                </div>
                <div class="pageHandle m-tb"></div>
            </div>
        </div>
        <h2 class="m">色彩</h2>
        <div class="row">
            <div class="span-2">
                <div class="bg-primary tc p">主色</div>
            </div>
            <div class="span-2">
                <div class="bg-auxiliary tc p">辅助色</div>
            </div>
            <div class="span-2">
                <div class="bg-success tc p">成功</div>
            </div>
            <div class="span-2">
                <div class="bg-info tc p">信息</div>
            </div>
            <div class="span-2">
                <div class="bg-warning tc p">警告</div>
            </div>
            <div class="span-2">
                <div class="bg-danger tc p">危险</div>
            </div>
        </div>
        <div class="row">
            <div class="span-4">
                <h2 class="m">日期选择</h2>
                <input type="text" class="form-control datepickerHandle" placeholder="选择日期">
            </div>
            <div class="span-4">
                <h2 class="m">时间选择</h2>
                <input type="text" class="form-control timepickerHandle" placeholder="选择日期">
            </div>
            <div class="span-4">
                <h2 class="m">日期/时间</h2>
                <input type="text" class="form-control datetimeHandle" placeholder="选择日期">
            </div>
        </div>
        <h2 class="m">表格</h2>
        <div class="tableHandle" style="height: 400px"></div>
        <h2 class="m">幻灯片</h2>
        <div class="slideHandle" style="height: 500px;display: none;">
            <ul>
                <li><img src="http://7xnt8z.com1.z0.glb.clouddn.com/view0.jpg" style="width:100%"></li>
                <li><img src="http://7xnt8z.com1.z0.glb.clouddn.com/view1.jpg" style="width:100%"></li>
                <li><img src="http://7xnt8z.com1.z0.glb.clouddn.com/view2.jpg" style="width:100%"></li>
                <li><img src="http://7xnt8z.com1.z0.glb.clouddn.com/view3.jpg" style="width:100%"></li>
            </ul>
        </div>
    </div>
    <div class="wrap m-tb-lg">
        <div class="row">
            <div class="span-6">
                <div class="p-lg">
                </div>
            </div>
        </div>
    </div>
    <footer class="wrap oh tc">
   <div class="row "> <a href="#" title="返回顶部" class="dib foot_logo gotop">
	   <figure></figure>
	</a>
	<p class="dib"> © 2016 - 3016  tower1229@gmail.com <a href="http://refined-x.com" title="雅X共赏的前端技术博客">前端路上</a><br>
	Acknowledgements : seajs \ bootstrap \ foundation \ ... </p>
	</div>
</footer>
<script type="text/javascript" async="async" src="//push.zhanzhang.baidu.com/push.js"></script>
    <script src="/Flow-UI/docs/lib/sea.js" id="seajsnode"></script>
    <script>
    seajs.use('js/demo');
    </script>
</body>

</html>
